const itemInput = document.querySelector('#itemInput')
const inputBox = document.querySelector('#inputBox')
const arrData = JSON.parse(localStorage.getItem('arrData')) ?? []       //存放本地用户数据的数组
const typeBtn = document.querySelectorAll('.typeButton')
const aaType = document.querySelector('#aaType')  //选择那三个点
let type = 0
const itemsBox = document.querySelector('#itemsBox')
const clearCacheBtn = document.querySelector('#clearCache')
const finCnts = document.querySelector('#finCnts')
const noFinCnts = document.querySelector('#noFinCnts')
const memoContent = document.querySelector('#memoContent')
const typeNav =document.querySelector('.typeNav')
const saveTimer = document.querySelector('#saveTimer')
const hours = document.querySelector('#hours')
const mins = document.querySelector('#mins')
const timerData = JSON.parse(localStorage.getItem('timerData')) ?? []   //存放保存的时间数组
const timerBox = document.querySelector('#timerBox')
const filterBtns = document.querySelectorAll('.filterBtn')
const bodyColorBox = document.querySelector('#bodyColorBox')
// const aaType = document.querySelector('#aaType')
// let finCountsData = 0
// let noFinCntsData = 0

renderItemnMemo()
renderTimer()   //初始化页面
aaType.style.width = itemInput.offsetWidth + 'px'

function saveAll(){
    localStorage.setItem('arrData',JSON.stringify(arrData))
    localStorage.setItem('timerData',JSON.stringify(timerData))
}
//这两个是inputBox获得焦点的变圆动画
itemInput.addEventListener('focus',function(){
    inputBox.style.borderRadius = '50px'
    inputBox.style.backgroundColor = '#D9CCC1'
})
itemInput.addEventListener('blur',function(){
    inputBox.style.borderRadius = '10px'
    inputBox.style.backgroundColor = 'rgba(191,177,164,0.5)'
})

//三个点的效果函数
aaType.addEventListener('click',function(e){
    if(e.target.tagName === 'BUTTON'){
        clearLight(typeBtn)
        e.target.classList.add('light')
        type = e.target.dataset.id 
        if(itemInput.value.trim() === '') return alert('请检查输入的任务!')
        if(!type) return alert('未选择任务类型!')
        arrData.push({
            type: type,
            content: itemInput.value.trim(),
            memoContent : '',
            cmplte : '0',
        })
        // noFinCntsData++
        itemInput.value = ''   //复原输入框
        clearLight(typeBtn)
        renderItemnMemo()
    } 
})

//清除数组对象中light类名
function clearLight(arr){
    for(let i of arr){
        i.classList.remove('light')
    }
}
// function renderItemnMemo(){   //渲染中间,右边的函数
//     const itemsArr = arrData.map(function(item,i){
//         return`
//         <div class="items ${item.type}" data-id="${i}" data-cmplte=${item.cmplte || 0}>
//             ${item.content}
//             <button data-id='1'>Del</button>
//             <button data-id='2'>Modify</button>
//             <button data-id='3'>Finished</button>
//         </div>`
//     })
//     itemsBox.innerHTML = itemsArr.join('')
//     finCnts.innerText = finCountsData
//     noFinCnts.innerHTML = noFinCntsData
// }
function renderItemnMemo(){
    render(arrData,itemsBox)
}

//清除缓存按钮
clearCacheBtn.addEventListener('click',function(){
    localStorage.clear()
    timerData.length = 0
    arrData.length = 0
    renderItemnMemo()
    renderTimer()
})

//input框的函数  添加任务
itemInput.addEventListener('keyup',function(e){
    if(e.key === 'Enter'){
        if(itemInput.value.trim() === '') return alert('请检查输入的任务!')
        if(!type) return alert('未选择任务类型!')
        arrData.push({
            type: type,
            content: itemInput.value.trim(),
            memoContent : '',
            cmplte : '0',
        })
        // noFinCntsData++
        itemInput.value = ''   //复原输入框
        clearLight(typeBtn)
        renderItemnMemo()
    }
})

//finished 函数
itemsBox.addEventListener('click',function(e){
    // console.log(e);
    if(e.target.tagName === 'BUTTON'){   
        if(e.target.dataset.id === '3' && arrData[e.target.parentNode.dataset.id].cmplte != '1'){
            arrData[e.target.parentNode.dataset.id].cmplte = '1'   //标记已完成
            renderItemnMemo()
        }
        else if(e.target.dataset.id === '1'){
            arrData.splice(e.target.parentNode.dataset.id,1)
            // noFinCntsData--
            renderItemnMemo()
        }
    }
    else{
        memoContent.dataset.id = e.target.dataset.id    //显示memo
        memoContent.value = arrData[e.target.dataset.id].memoContent
    }
})
memoContent.addEventListener('blur',function(){    //同步memo
            arrData[memoContent.dataset.id].memoContent = memoContent.value.trim()
})
typeNav.addEventListener('click',function(e){   //筛选按钮的函数
    // console.log(e)
    if(e.target.tagName === 'BUTTON' && e.target.className === 'filterBtn'){
        if(e.target.dataset.id === 'all') {
            clearLight(filterBtns)
            return renderItemnMemo()}
        const arr = arrData.filter(function(item,i){
            return item.type === e.target.dataset.id
        })
        render(arr,itemsBox)
        clearLight(filterBtns)
        e.target.classList.add('light')
    }
})

function render(arr,textLocation){   //渲染arr到textLocation中
    let noFinCntsData = arr.length
    // console.log(arr)
    const itemsArr = arr.map(function(item,i){
        if(item.cmplte === '1') noFinCntsData--
        return`
        <div class="items ${item.type}" data-id="${i}" data-cmplte=${item.cmplte || 0}>
            ${item.content}
            <button data-id='1'>Del</button>
            
            <button data-id='3'>Finished</button>
        </div>`
    })
    textLocation.innerHTML = itemsArr.join('')
    finCnts.innerText = arr.length - noFinCntsData
    noFinCnts.innerHTML = noFinCntsData
    saveAll()
}

saveTimer.addEventListener('click',function(){
    timerData.push({
        hours:goTwo(hours.value),
        mins:goTwo(mins.value),
    })
    renderTimer()
    hours.value = '00'
    mins.value = '00'
})
function goTwo(a){
    return +a>=10? a:'0'+ (+a) 
}
function renderTimer() {
    const arr = timerData.map(function(item,i){
        return`
        <li class="time" data-id=${i}>${item.hours}:${item.mins} 
            <button class="startBtn">GO</button>
            <button class="deleteBtn">Del</button>
        </li> 
        `
    })
    timerBox.innerHTML = arr.join('')
    saveAll()
}
timerBox.addEventListener('click',function(e){
    if(e.target.tagName === 'BUTTON' && e.target.className === 'startBtn'){
        // console.log(timerBox.innerText)
        // console.log(e)
        const time = e.target.parentNode.innerText.match(/(\d+):(\d+)/)
        hours.value = time[1]
        mins.value = time[2]
        let i = setInterval(function(m,s){
            if(mins.value == 0){
                hours.value--
                mins.value=60
            }
            mins.value--;
            if(mins.value==0 && hours.value == 0) {
                clearInterval(i)  //清除计时器的定时器
                alert('计时结束!')
                mins.value = '00'
            }
        },1000)
    }
    else if(e.target.tagName === 'BUTTON' && e.target.className === 'deleteBtn'){
        timerData.splice(e.target.parentNode.dataset.id,1)
        renderTimer()
    }
})
window.addEventListener('resize',function(){
    // console.log(aaType.style.width)
    aaType.style.width = itemInput.offsetWidth + 'px'
})
bodyColorBox.addEventListener('click',function(e){
    if(e.target.tagName === 'BUTTON'){
        document.body.style.backgroundColor = e.target.dataset.id
    }
})